<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="zhangfn" uri="http://github.com/zhangkaitao/tags/zhang-functions" %>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <title></title>
    <!--  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/css.css">-->
    <!--  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/JQuery zTree v3.5.15/css/zTreeStyle/zTreeStyle.css">-->
    <!-- <style>
        ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:200px;overflow-y:scroll;overflow-x:auto;}
    </style>-->
    
   
	<c:set value="${pageContext.request.contextPath}" var="path1" scope="page"/>
    <!-- Bootstrap Core CSS -->
    <link href="${path1}/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${path1}/static/css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${path1}/static/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${path1}/static/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

</head>
<body>
<div class="row">
<div class="col-md-4">
    <form:form method="post" commandName="user">
        <form:hidden path="id"/>
        <form:hidden path="salt"/>
        <form:hidden path="locked"/>

        <c:if test="${op ne '新增'}">
            <form:hidden path="password"/>
        </c:if>

        <div class="form-group">
            <form:label path="username">用户名：</form:label>
            <form:input class="form-control" path="username"/>
        </div>
        
        <c:if test="${op eq '新增'}">
            <div class="form-group">
                <form:label path="password">密码：</form:label>
         <!-- 此处本来form标签下为password，被改为input -->
                <form:input class="form-control" path="password"/>
            </div>
        </c:if>

        <div class="form-group">
            <form:label path="organizationId" >所属组织：</form:label>
            <form:hidden path="organizationId"/>
            <input class="form-control" type="text" id="organizationName" name="organizationName" value="${zhangfn:organizationName(user.organizationId)}" readonly>
            <a id="menuBtn" href="#">选择</a>
        </div>


        <div class="form-group">
            <form:label path="roleIds">角色列表：</form:label>
            <form:select multiple="" class="form-control" path="roleIds" items="${roleList}" itemLabel="description" itemValue="id" />
            (按住shift键多选)
        </div>

        <form:button  class="btn btn-primary">${op}</form:button>

    </form:form>
    </div>
    </div>
   
   


    <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
        <ul id="tree" class="ztree" style="margin-top:0; width:160px;"></ul>
    </div>

    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/JQuery zTree v3.5.15/js/jquery.ztree.all-3.5.min.js"></script>
    <script>
        $(function () {
            var setting = {
                view: {
                    dblClickExpand: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: onClick
                }
            };

            var zNodes =[
                <c:forEach items="${organizationList}" var="o">
                    <c:if test="${not o.rootNode}">
                        { id:${o.id}, pId:${o.parentId}, name:"${o.name}"},
                    </c:if>
                </c:forEach>
            ];

            function onClick(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree"),
                        nodes = zTree.getSelectedNodes(),
                        id = "",
                        name = "";
                nodes.sort(function compare(a,b){return a.id-b.id;});
                for (var i=0, l=nodes.length; i<l; i++) {
                    id += nodes[i].id + ",";
                    name += nodes[i].name + ",";
                }
                if (id.length > 0 ) id = id.substring(0, id.length-1);
                if (name.length > 0 ) name = name.substring(0, name.length-1);
                $("#organizationId").val(id);
                $("#organizationName").val(name);
                hideMenu();
            }

            function showMenu() {
                var cityObj = $("#organizationName");
                var cityOffset = $("#organizationName").offset();
                $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

                $("body").bind("mousedown", onBodyDown);
            }
            function hideMenu() {
                $("#menuContent").fadeOut("fast");
                $("body").unbind("mousedown", onBodyDown);
            }
            function onBodyDown(event) {
                if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                    hideMenu();
                }
            }

            $.fn.zTree.init($("#tree"), setting, zNodes);
            $("#menuBtn").click(showMenu);
        });
    </script>
    
    <!-- jQuery -->
    <script src="${path1}/static/js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="${path1}/static/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="${path1}/static/js/plugins/metisMenu/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="${path1}/static/js/sb-admin-2.js"></script>

</body>
</html>